<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #mydiv{
            position: fixed;
            top:100px;
            left: 10px;
            background-image:  url("image/e.gif");
        }

        #mydiv {
            animation: mydivimg 2s infinite;
        }
        @keyframes mydivimg {
            7%{
                left: 20px;
                background-image: url("image/1.gif");}
            14%{
                left: 30px; background-image: url("image/2.gif");}
            21%{
                left: 40px;background-image: url("image/3.gif");}
           28%{
               left: 50px;background-image: url("image/4.gif");}
            35%{
                left: 60px; background-image: url("image/5.gif");}
            42%{
                left: 70px;background-image: url("image/6.gif");}
            49%{
                left: 80px;background-image: url("image/7.gif");}
            56%{
                left: 90px; background-image: url("image/8.gif");}
            63%{
                left: 100px;background-image: url("image/9.gif");}
            70%{
                left: 110px;background-image: url("image/a.gif");}
            77%{
                left: 120px; background-image: url("image/b.gif");}
            84%{
                left: 130px;background-image: url("image/c.gif");}
            93%{
                left: 140px; background-image: url("image/d.gif");}
        }
    </style>
</head>
<body>

<div id="mydiv" style="width: 150px;height: 120px "></div>
</body>
</html>